<template>
  <div class="xtx-category-page">
    <div class="container">
        <!-- 面包屑  -->
        <xtx-bread>
            <xtx-bread-item to="/">首页</xtx-bread-item>
            <transition name="fade-right" mode="out-in" appear>
                <!-- 第一种 -->
                <!-- <xtx-bread-item>{{$route.params.categoryname}}</xtx-bread-item> -->
                <!-- 第二种 -->
                <xtx-bread-item :key="categoryName">{{categoryName}}</xtx-bread-item>
            </transition>
        </xtx-bread>
        <!-- 轮播图 -->
        <xtx-carousel :sliders="sliders" style="height: 500px" />
         <!-- 所有二级分类 -->
        <div class="sub-list">
            <h3>全部分类</h3>
            <ul  v-if="secondCategoryList.length > 0" >
              <li v-for="list in secondCategoryList" :key="list.id">
                  <a href="javascript:;">
                  <img
                      :src="list.picture"
                  />
                  <p>{{list.name}}</p>
                  </a>
              </li>
            </ul>
            <div class="home-skeleton" v-else>
              <div class="item" v-for="i in 7" :key="i">
                <XtxSkeleton bg="#e4e4e4" width="168px" height="140px" animated />
              </div>
            </div>
        </div>
        <!-- 分类关联商品 -->
        <div class="ref-goods"  v-for="list in secondCategoryList" :key="list.id">
          <div class="head">
            <h3>{{list.name}}</h3>
            <p class="tag">温暖柔软，品质之选</p>
            <xtx-more />
          </div>
          <div class="body" v-if="list.goods.length > 0">
            <!-- 循环某个大块二级分类下属商品 -->
            <goods-item
            v-for="goodsObj in list.goods"
            :key="goodsObj.id"
            :goods="goodsObj"
            ></goods-item>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import { getBannerListAPI, getSecondCategoryAPI } from '@/api'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import goodsItem from '@/components/GoodsItem.vue'
export default {
  name: 'xtx-category-page',
  components: {
    goodsItem
  },
  // 问题：切换路由无法切换面包屑

  // 原因：setup只执行一次

  // 解决1：侦听route变化可解决
  // watch(val => {
  //   categoryName.value = route.params.categoryname
  // })

  // 解决2：使用vue-router4提供的方法 `onBeforeRouteUpdate` 可以监听路由参数改变(路径分类ID)
  //   onBeforeRouteUpdate((to, from, next) => {
  //       categoryName.value = to.params.categoryname
  //       next()
  //     })
  setup () {
    const sliders = ref([])// 轮播图数据
    const categoryName = ref(0)// 分类后面包屑导航名字
    const secondCategoryList = ref([]) // 二级分类
    const route = useRoute()// 返回当前路由地址

    categoryName.value = route.params.categoryname
    // 解决切换路由无法切换面包屑
    onBeforeRouteUpdate((to, from, next) => {
      categoryName.value = to.params.categoryname
      getSecondCategoryFn(to)
      next()
    })
    // 调用API获取轮播图数据
    onMounted(async () => {
      const data = await getBannerListAPI({ num: '2' })
      sliders.value = data.result

      getSecondCategoryFn(route)
    })
    //  二级分类
    const getSecondCategoryFn = async (routeObj) => {
      const secondRes = await getSecondCategoryAPI(routeObj.params.categoryid)
      // console.log(secondRes)
      secondCategoryList.value = secondRes.result.children
      // console.log(secondCategoryList)
    }

    return { sliders, categoryName, secondCategoryList }
  }
}
</script>

<style lang="less" scoped>
.xtx-category-page {
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }
  .sub-list {
    margin-top: 20px;
    background-color: #fff;
    ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;
      li {
        width: 168px;
        height: 160px;
        a {
          text-align: center;
          display: block;
          font-size: 16px;
          img {
            width: 100px;
            height: 100px;
          }
          p {
            line-height: 40px;
          }
          &:hover {
            color: var(--xtx-color);
          }
        }
      }
    }
  }
}
.ref-goods {
  background-color: #fff;
  margin-top: 20px;
  position: relative;
  .head {
    .xtx-more {
      position: absolute;
      top: 20px;
      right: 20px;
    }
    .tag {
      text-align: center;
      color: #999;
      font-size: 20px;
      position: relative;
      top: -20px;
    }
  }
  .body {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 65px 30px;
    .none {
      height: 220px;
      text-align: center;
      width: 100%;
      line-height: 220px;
      color: #999;
    }
  }
}
.home-skeleton {
  width: 1240px;
  height: 406px;
  display: flex;
  justify-content: space-between;
  .item {
    width: 306px;
    .xtx-skeleton ~ .xtx-skeleton {
      display: block;
      margin: 16px auto 0;
    }
  }
}
</style>
